<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/activityGrouping.css" rel="stylesheet" type="text/css" />
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <style type="text/css">
      .password-input {
        margin: 10px;
      }

      .password-input .password-input__form {
        background-color: Red;
        border-radius: 3px;
        color: White;
        display: flex;
        font-family: Calibri, 'Helvetica Neue', Arial, sans-serif;
        padding: 5px;
      }

      .password-input .password-input__box {
        display: flex;
        flex: 1;
      }

      .password-input .password-input__label {
        padding: 10px;
      }

      .password-input .password-input__input {
        border: 0px;
        border-radius: 3px;
        flex: 1;
        letter-spacing: 0.5em;
        outline: 0;
        padding: 0 10px;
        width: 100%;
      }

      .password-input .password-input__input:disabled {
        background-color: rgba(255, 255, 255, 0.5);
        color: White;
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        React: { useCallback, useState },
        WebChat: {
          hooks: { useCreateActivityStatusRenderer, useSendPostBack }
        }
      } = window;

      const PasswordInputActivity = ({ activity }) => {
        const [twoFACode, setTwoFACode] = useState('');
        const [submitted, setSubmitted] = useState(false);
        const renderActivityStatus = useCreateActivityStatusRenderer()({ activity });
        const sendPostBack = useSendPostBack();

        const handleCodeChange = useCallback(
          ({ target: { value } }) => {
            setTwoFACode(value);
          },
          [setTwoFACode]
        );

        const handleSubmit = useCallback(
          event => {
            event.preventDefault();

            sendPostBack({ code: twoFACode });
            setSubmitted(true);
          },
          [sendPostBack, setSubmitted, twoFACode]
        );

        return (
          <div className="password-input">
            <form className="password-input__form" onSubmit={handleSubmit}>
              <label className="password-input__box">
                <span className="password-input__label">Please input your 2FA code</span>
                <input
                  autoFocus={true}
                  className="password-input__input"
                  disabled={submitted}
                  onChange={handleCodeChange}
                  type="password"
                  value={twoFACode}
                />
              </label>
            </form>
            {renderActivityStatus()}
          </div>
        );
      };

      const activityMiddleware =
        () =>
        next =>
        (...args) => {
          const [{ activity }] = args;

          if (activity.type === 'password-input') {
            return () => <PasswordInputActivity activity={activity} />;
          }

          return next(...args);
        };

      run(async function () {
        const now = Date.now();

        WebChat.renderWebChat(
          {
            activityMiddleware,
            directLine: await testHelpers.createDirectLineWithTranscript([
              {
                from: {
                  role: 'bot'
                },
                text: 'Hello, World!',
                textFormat: 'markdown',
                timestamp: new Date(now).toISOString(),
                type: 'message'
              },
              {
                from: {
                  role: 'bot'
                },
                timestamp: new Date(now).toISOString(),
                type: 'password-input'
              }
            ]),
            store: testHelpers.createStore()
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await host.snapshot();
      });
    </script>
  </body>
</html>
